<template>
  <div class="simple-chat">
    <el-card>
      <template #header>
        <h2>简单聊天测试</h2>
      </template>
      
      <div class="chat-container">
        <div class="messages">
          <div 
            v-for="(message, index) in messages" 
            :key="index"
            :class="['message', message.type]"
          >
            <div class="message-content">
              <span class="avatar">{{ message.type === 'user' ? '👤' : '🤖' }}</span>
              <div class="text">{{ message.content }}</div>
            </div>
            <div class="time">{{ formatTime(message.timestamp) }}</div>
          </div>
        </div>
        
        <div class="input-area">
          <el-input
            v-model="inputText"
            placeholder="输入消息..."
            @keyup.enter="sendMessage"
          />
          <el-button @click="sendMessage" :disabled="!inputText.trim()">
            发送
          </el-button>
        </div>
      </div>
      
      <div class="debug-info">
        <p>消息数量: {{ messages.length }}</p>
        <p>输入内容: {{ inputText }}</p>
        <el-button @click="addTestMessage">添加测试消息</el-button>
        <el-button @click="clearMessages">清空消息</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const messages = reactive([
  {
    type: 'assistant',
    content: '你好！我是AI助手，有什么可以帮助你的吗？',
    timestamp: new Date()
  }
])

const inputText = ref('')

const sendMessage = () => {
  if (!inputText.value.trim()) return
  
  // 添加用户消息
  messages.push({
    type: 'user',
    content: inputText.value,
    timestamp: new Date()
  })
  
  // 清空输入
  inputText.value = ''
  
  // 模拟AI回复
  setTimeout(() => {
    messages.push({
      type: 'assistant',
      content: '我收到了你的消息！这是一个模拟回复。',
      timestamp: new Date()
    })
  }, 1000)
}

const addTestMessage = () => {
  messages.push({
    type: 'assistant',
    content: '这是一条测试消息',
    timestamp: new Date()
  })
}

const clearMessages = () => {
  messages.length = 0
  messages.push({
    type: 'assistant',
    content: '消息已清空',
    timestamp: new Date()
  })
}

const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleTimeString()
}
</script>

<style scoped>
.simple-chat {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
}

.chat-container {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.messages {
  height: 400px;
  overflow-y: auto;
  padding: 20px;
  background-color: #f9f9f9;
}

.message {
  margin-bottom: 15px;
}

.message.user {
  text-align: right;
}

.message.assistant {
  text-align: left;
}

.message-content {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 70%;
}

.message.user .message-content {
  flex-direction: row-reverse;
}

.avatar {
  font-size: 20px;
}

.text {
  padding: 10px 15px;
  border-radius: 15px;
  word-wrap: break-word;
}

.message.user .text {
  background-color: #409eff;
  color: white;
}

.message.assistant .text {
  background-color: white;
  color: #333;
  border: 1px solid #ddd;
}

.time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.input-area {
  display: flex;
  gap: 10px;
  padding: 15px;
  background-color: white;
  border-top: 1px solid #ddd;
}

.input-area .el-input {
  flex: 1;
}

.debug-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.debug-info p {
  margin: 5px 0;
}
</style>
